<template>
  <div class="container" v-loading="loading" element-loading-text="加载中">
    <div class="box">
      <div class="title">基本信息</div>
      <div class="content">
        <el-form ref="baseForm" :model="baseForm" :rules="rules" label-width="120px">
          <el-form-item label="供应商名称：" prop="supplierName">
            <el-input v-model="baseForm.supplierName" placeholder="请输入供应商名称"></el-input>
          </el-form-item>
          <el-form-item label="操作员姓名：" prop="realName">
            <el-input v-model="baseForm.realName" placeholder="请输入操作员姓名"></el-input>
          </el-form-item>
          <el-form-item label="登录手机号：" prop="phone">
            <el-input v-model="baseForm.phone" maxlength="11" placeholder="请输入手机号"
              oninput="this.value=this.value.replace(/^[0,2,3,4,5,6,7,8,9]*$/gi,'')"
              onkeyup="this.value=this.value.replace(/\D/g,'')">
            </el-input>
          </el-form-item>
          <el-form-item label="所属角色：" prop="subRoleId">
            <el-select v-model="baseForm.subRoleId" placeholder="请选择">
              <el-option v-for="(item, index) in subRoleList" :key="item.subRoleId" :index="index" :label="item.name"
                :value="item.subRoleId" />
            </el-select>
          </el-form-item>
          <el-form-item label="登录密码：" prop="password">
            <el-input v-model="baseForm.password" maxlength="11" type="password"></el-input>
          </el-form-item>
          <el-form-item label="确认密码：" prop="passwordAgain">
            <el-input v-model="baseForm.passwordAgain" maxlength="11" type="password"></el-input>
          </el-form-item>
          <el-form-item label="联系人：" v-if="!newFlag">
            <span v-if="baseForm.contact">{{baseForm.contact}}</span>
            <span v-else>未填写</span>
          </el-form-item>
          <el-form-item label="联系电话：" v-if="!newFlag">
            <span v-if="baseForm.contactPhone">{{baseForm.contactPhone}}</span>
            <span v-else>未填写</span>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div class="box">
      <div class="title">管理参数</div>
      <div class="content">
        <el-form ref="manageFrom" :model="baseForm" :rules="rules" label-width="120px">
          <el-form-item label="结算类型：">
            <el-radio-group v-model="baseForm.settlementType" @change="settlementTypeChange">
              <el-radio label="10">成本代销</el-radio>
              <el-radio label="20">扣率代销</el-radio>
              <!-- <el-radio label="30" v-if="this.enterpriseConfig.warehouseAuthority == 1">成本经销</el-radio> -->
            </el-radio-group>
            <br>
            <span class="font-color-9" v-if="baseForm.settlementType == '10'">成本代销：以销售数量×供应价结算给供应商。</span>
            <span class="font-color-9" v-if="baseForm.settlementType == '20'">扣率代销：以销售数量×销售价×（1-扣率）结算给供应商。</span>
          </el-form-item>
          <el-form-item label="扣率：" prop="settlementRate" v-if="baseForm.settlementType == '20'">
            <el-input v-model="baseForm.settlementRate">
              <template slot="append">%</template>
            </el-input>
          </el-form-item>
          <el-form-item label="开票模式：" prop="platformGenerationInvoiceFlag">
            <el-col>
              <el-checkbox v-model="baseForm.platformGenerationInvoiceFlag">平台代开</el-checkbox>
            </el-col>
            <span class="font-color-9" v-if="baseForm.settlementType == '10'">勾选时开票方销方是平台，未勾选时开票方销方是供应商</span>
          </el-form-item>
          <!-- 成本经销 -->
          <el-form-item label="进项发票类型" prop="invoiceType"
            v-if="baseForm.settlementType == '30' && this.enterpriseConfig.warehouseAuthority == 1">
            <el-select v-model="baseForm.invoiceType">
              <el-option v-for="item in invoiceTypeList" :key="item.value" :label="item.lable" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <!-- TO DO 未实现 -->
          <!-- <el-form-item label="结算方式：">
            <el-radio-group v-model="baseForm.settlementMethod">
              <el-radio label="10">线下结算</el-radio>
              <el-radio label="20">自动分账</el-radio>
            </el-radio-group>
          </el-form-item> -->
          <el-form-item label="供应商状态：">
            <el-radio-group v-model="baseForm.status">
              <el-radio label="0">启用</el-radio>
              <el-radio label="1">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label=" ">
            <el-checkbox v-model="baseForm.goodsAutoApproveFlag">开启商品自动审核</el-checkbox>
          </el-form-item>
          <el-form-item label=" ">
            <div class="content-area">
              <el-checkbox v-model="baseForm.autoFlag" @change="changeName">新增供应商时自动创建名称为</el-checkbox>
              <el-input v-model="baseForm.createGoodsGroupName" :disabled="!baseForm.autoFlag" style="width: 120px">
              </el-input>
              <span>的商品组</span>
            </div>
          </el-form-item>
          <el-form-item label="面单使用方式：">
          </el-form-item>
          <el-form-item label="快递鸟：">
            <el-radio-group v-model="baseForm.kuaiDiNiaoUseType">
              <el-radio label="1">企业</el-radio>
              <el-radio label="2">供应商</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="抖音：">
            <el-radio-group v-model="baseForm.douYinUseType">
              <el-radio label="1">企业</el-radio>
              <el-radio label="2">供应商</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="淘宝：">
            <el-radio-group v-model="baseForm.taoBaoUseType">
              <el-radio label="1">企业</el-radio>
              <el-radio label="2">供应商</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="拼多多：">
            <el-radio-group v-model="baseForm.pinDuoDuoUseType">
              <el-radio label="1">企业</el-radio>
              <el-radio label="2">供应商</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div class="box">
      <div class="title">地址信息</div>
      <div class="content">
        <el-form ref="addressFrom" :model="baseForm" label-width="120px">
          <el-form-item label="城市地区：">
            <el-select class="width-130" v-model="baseForm.contactProvinceCode" placeholder="请选择省份" clearable
              @change="changeCity(baseForm.contactProvinceCode)">
              <el-option v-for="item in provinceList" :key="item.areaCode" :label="item.areaName"
                :value="item.areaCode">
              </el-option>
            </el-select>
            <el-select class="width-130" v-model="baseForm.contactCityCode" placeholder="请选择城市" clearable
              @change="changeDistrict(baseForm.contactCityCode)">
              <el-option v-for="item in cityList" :key="item.areaCode" :label="item.areaName" :value="item.areaCode">
              </el-option>
            </el-select>
            <el-select class="width-130" v-model="baseForm.contactDistrictCode" placeholder="请选择区县" clearable>
              <el-option v-for="item in districtList" :key="item.areaCode" :label="item.areaName"
                :value="item.areaCode">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="详细地址：">
            <el-input placeholder="请录入详细地址" v-model="baseForm.contactAddress"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div class="box">
      <div class="title">分类信息</div>
      <div class="content">
        <div class="mar-b-20 mar-l-30"><label>请勾选供应商所属的分类（可多选）：</label></div>
        <div class="mar-l-30">
          <el-checkbox-group v-model="baseForm.supplierCategoryIds" style="width: 800px">
            <el-checkbox style="width: 33%; margin: 0 0 10px 0" v-for="(item, index) in supplierCategoryList"
              :key="index" :label="item.categoryId">{{item.categoryName}}</el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
    </div>

    <div class="box" v-if="!newFlag">
      <div class="title">资质材料</div>
      <div class="content">
        <div class="sub-title">
          <span> 资质材料审核状态：</span>
          <span :class="resultColor">{{statusLabel[baseForm.approveStatus]}}</span>
        </div>
        <el-form ref="qualificationForm" :model="baseForm" label-width="120px" style="width: 70%">
          <el-form-item label="开户名称：">
            <el-input v-model="baseForm.bankName" placeholder="请输入开户名称"></el-input>
          </el-form-item>
          <el-form-item label="开户银行：">
            <el-input v-model="baseForm.bankCardNo" placeholder="请输入开户银行"></el-input>
          </el-form-item>
          <el-form-item label="开户银行账号：">
            <el-input v-model="baseForm.bankAccountName" placeholder="请输入开户银行账号"></el-input>
          </el-form-item>
          <el-form-item label="营业执照：">
            <div class="flex height-148 upload-remove-bar">
              <el-upload list-type="picture-card" action="/api/common/uploadFiles"
                accept="image/jpeg,image/gif,image/png,image/bmp" :on-preview="showPrePicDialog" :data="token"
                :on-remove="handleRemoveBusinessLicensePic" :file-list="businessLicensePicList" :limit="1"
                :on-success="handleUploadBusinessLicensePicSuccess" :before-upload="beforeUploadBusinessLicensePic"
                name="files" :class="{disabled:uploadBusinessLicensePicDisabled}" ref="uploadBusinessLicensePic">
                <!--                <img v-if="ic.businessLicenseUrl"
                  :src="qualificationForm.businessLicenseUrl+ '?imageView2/1/w/200/h/200/q/100'"
                  style="width: 150px;height: 150px">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
                <i class="el-icon-plus"></i>
              </el-upload>
            </div>
          </el-form-item>
          <el-form-item label="协议照片：">
            <el-upload list-type="picture-card" action="/api/common/uploadFiles"
              accept="image/jpeg,image/gif,image/png,image/bmp" :on-preview="showPrePicDialog" :data="token"
              :on-remove="handleRemoveAgreementPic" :file-list="agreementImageFileList"
              :on-success="handleUploadAgreementPicSuccess" :before-upload="beforeUploadAgreementPic" name="files"
              :class="{disabled:uploadAgreementPicDisabled}" ref="uploadAgreementPic" :limit='8'>
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="其他资质材料：">
            <el-upload list-type="picture-card" action="/api/common/uploadFiles"
              accept="image/jpeg,image/gif,image/png,image/bmp" :on-preview="showPrePicDialog" :data="token"
              :on-remove="handleRemovePic" ref="uploadOtherPic" :file-list="otherImageFileList" name="files"
              :on-success="handleUploadOtherPicSuccess" :before-upload="beforeUploadOtherPic"
              :class="{disabled:uploadOtherPicDisabled}" :limit='5'>
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <div class="pad-l-30 pad-b-20" v-if="baseForm.approveStatus == 20">
            <el-button type="primary" @click="updateStatus(30)">审核通过</el-button>
            <el-button @click="updateStatus(90)">审核不通过</el-button>
          </div>
        </el-form>
      </div>
    </div>

    <div class="text-align-c pad-t-30 pad-b-30">
      <el-button type="primary" @click="handleSave()">保存</el-button>
      <el-button @click="$router.go(-1)">返回</el-button>
    </div>
    <el-dialog :visible.sync="prePicDialogVisable">
      <img width="100%" :src="prePicImageUrl" alt="">
      <div slot="footer" class="dialog-footer">
        <el-button @click="prePicDialogVisable = false">取 消</el-button>
        <el-button type="primary" @click="downloadIamge(prePicImageUrl)">下载</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    listEnterpeiseRole
  } from '@/api/system/role'
  import {
    listProvince,
    listCity,
    listDistrict
  } from '@/api/area/area'
  import {
    getVillageSupplier,
    saveSupplier,
    updateApproveStatus
  } from '@/api/user/supplier'
  import {
    listSupplierCategory
  } from '@/api/user/supplierCategory'
  import {
    getToken
  } from '@/utils/auth'
  import {
    getByEnterpriseId
  } from '@/api/user/enterprise'
  export default {
    data() {
      // 密码校验
      var checkPassword = (rule, value, callback) => {
        if (this.baseForm.passwordAgain && value !== this.baseForm.passwordAgain) {
          callback(new Error('两次输入密码不一致'))
        } else {
          callback()
        }
      }
      // 二次密码校验
      var checkPasswordAgain = (rule, value, callback) => {
        if (this.baseForm.password && value !== this.baseForm.password) {
          callback(new Error('两次输入密码不一致'))
        } else {
          callback()
        }
      }
      // 扣率自定义校验
      var checkSettlementRate = (rule, value, callback) => {
        if (this.baseForm.settlementType !== '20') {
          callback()
          return
        }
        const reg = /^(([1-9][0-9]*)|[0]|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/
        if (!this.$utils.isNumber(value.toString()) || parseFloat(value) < 0 || parseFloat(value) > 100 || !reg.test(
          value)) {
          callback(new Error('请输入0-100的数, 最多有两位小数！'))
        } else {
          callback()
        }
      }
      // 供应商名称校验
      var checkSupplierName = (rule, value, callback) => {
        if (value && value.trim()) {
          callback()
        } else {
          callback(new Error('供应商名称不能为空'))
        }
      }
      return {
        // 基本信息表单
        baseForm: {
          enterpriseId: this.getEnterpriseId(),
          supplierId: '',
          supplierName: '',
          realName: '',
          phone: '',
          subRoleId: '',
          password: '',
          passwordAgain: '',
          contactProvinceCode: '',
          contactCityCode: '',
          contactDistrictCode: '',
          contactAddress: '',
          contact: '',
          contactPhone: '',
          settlementType: '10',
          settlementRate: 0,
          settlementMethod: '10',
          status: '0',
          goodsAutoApprove: '',
          goodsAutoApproveFlag: false,
          autoFlag: false,
          createGoodsGroupName: '',
          supplierCategoryIds: [],
          invoiceType: '',
          // // 资质表单
          approveStatus: '',
          bankName: '',
          bankCardNo: '',
          bankAccountName: '',
          businessLicenseUrl: '',
          otherImageList: [],
          agreementImageList: [],
          // 平台代开
          platformGenerationInvoiceFlag: false,
          kuaiDiNiaoUseType: '2',
          douYinUseType: '2',
          taoBaoUseType: '2',
          pinDuoDuoUseType: '2'
        },
        rules: {
          supplierName: [{
            required: true,
            message: '请输入供应商名称',
            trigger: 'blur'
          },
          {
            validator: checkSupplierName,
            trigger: 'blur'
          }
          ],
          realName: [{
            required: true,
            message: '请输入操作员姓名',
            trigger: 'blur'
          }],
          phone: [{
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          }],
          subRoleId: [{
            required: true,
            message: '请选择角色',
            trigger: 'blur'
          }],
          password: [{
            validator: checkPassword,
            trigger: 'blur'
          }],
          passwordAgain: [{
            validator: checkPasswordAgain,
            trigger: 'blur'
          }],
          settlementRate: [{
            validator: checkSettlementRate,
            trigger: 'blur'
          }]
        },
        statusLabel: {
          10: '待提交',
          20: '待审核',
          30: '已通过',
          90: '未通过'
        },
        // 状态颜色
        resultColor: '',
        // 角色集合
        subRoleList: [],
        // 供应商分类集合
        supplierCategoryList: [],
        // 省集合
        provinceList: [],
        // 市集合
        cityList: [],
        // 区集合
        districtList: [],
        loading: false,
        newFlag: true,
        // 进项发票类型
        invoiceTypeList: [{
          lable: '无',
          value: 0
        },
        {
          lable: '增值税专用发票',
          value: 1
        },
        {
          lable: '增值税普通发票',
          value: 2
        }
        ],
        token: '',
        prePicDialogVisable: false,
        prePicImageUrl: '',
        businessLicensePicList: [],
        agreementImageFileList: [],
        otherImageFileList: [],
        enterpriseConfig: {
          warehouseAuthority: 0
        }
      }
    },
    created() {
      this.token = {
        accessToken: getToken()
      }
      const queryParams = this.getCurrentPage().query
      const supplierId = queryParams.supplierId
      if (supplierId) {
        this.newFlag = false
        this.baseForm.supplierId = supplierId
        this.init()
      }
      listEnterpeiseRole({
        enterpriseId: this.getEnterpriseId(),
        supplierFlag: 1
      }).then(response => {
        if (response.isError) return
        this.subRoleList = response.data
      })
      listSupplierCategory({
        enterpriseId: this.getEnterpriseId()
      }).then(response => {
        if (response.isError) return
        this.supplierCategoryList = response.data
      })
      listProvince().then(response => {
        this.provinceList = response.data
      })
      getByEnterpriseId(this.getEnterpriseId()).then((response) => {
        if (response.isError) return
        this.enterpriseConfig = response.data
      })
    },
    computed: {
      uploadBusinessLicensePicDisabled: function() {
        return this.baseForm.businessLicenseUrl !== '' && this.baseForm.businessLicenseUrl !== undefined
      },
      uploadOtherPicDisabled: function() {
        return this.baseForm.otherImageList.length === 5
      },
      uploadAgreementPicDisabled: function() {
        return this.baseForm.agreementImageList.length === 8
      }
    },
    methods: {
      // 初始化数据
      init() {
        this.loading = true
        this.baseForm.password = ''
        this.baseForm.passwordAgain = ''
        this.otherImageFileList = []
        this.agreementImageFileList = []
        getVillageSupplier(this.baseForm.supplierId).then(response => {
          if (response.isError) return
          Object.assign(this.baseForm, response.data)
          this.setColor()
          this.changeCity(this.baseForm.contactProvinceCode, this.baseForm.contactCityCode, this.baseForm
            .contactDistrictCode)
          this.baseForm.settlementType = this.baseForm.settlementType.toString()
          this.baseForm.settlementMethod = this.baseForm.settlementMethod.toString()
          this.baseForm.status = this.baseForm.status.toString()
          this.baseForm.goodsAutoApproveFlag = this.baseForm.goodsAutoApprove === 1
          this.baseForm.platformGenerationInvoiceFlag = this.baseForm.platformGenerationInvoiceFlag === 1
          this.loading = false
          this.baseForm.kuaiDiNiaoUseType = this.baseForm.kuaiDiNiaoUseType.toString()
          this.baseForm.douYinUseType = this.baseForm.douYinUseType.toString()
          this.baseForm.taoBaoUseType = this.baseForm.taoBaoUseType.toString()
          this.baseForm.pinDuoDuoUseType = this.baseForm.pinDuoDuoUseType.toString()
          // this.otherImageFileList = [...this.baseForm.otherImageList]
          this.baseForm.otherImageList.forEach(i => {
            const file = {
              url: i
            }
            this.otherImageFileList.push(file)
          })
          // this.agreementImageFileList = [...this.baseForm.agreementImageList]
          this.baseForm.agreementImageList.forEach(i => {
            const file = {
              url: i
            }
            this.agreementImageFileList.push(file)
          })
          if (this.baseForm.businessLicenseUrl !== undefined && this.businessLicensePicList.length === 0) {
            const businessLicenseUrlItem = {}
            businessLicenseUrlItem.url = this.baseForm.businessLicenseUrl
            this.businessLicensePicList.push(businessLicenseUrlItem)
          }
        })
      },
      // 生成默认商品组名
      changeName() {
        if (this.baseForm.autoFlag) this.baseForm.createGoodsGroupName = this.baseForm.supplierName
        else this.baseForm.createGoodsGroupName = ''
      },
      // 设置颜色
      setColor() {
        if (this.baseForm.approveStatus === 90) this.resultColor = 'font-red'
        else if (this.baseForm.approveStatus === 30) this.resultColor = 'font-green'
        else this.resultColor = ''
      },
      // 获取联系地址-市
      changeCity(provinceCode, cityCode, districtCode) {
        this.cityList = []
        this.districtList = []
        this.baseForm.contactCityCode = ''
        this.baseForm.contactDistrictCode = ''
        if (provinceCode) {
          listCity(provinceCode).then(response => {
            this.cityList = response.data
          })
          this.baseForm.contactCityCode = cityCode
          this.changeDistrict(cityCode, districtCode)
        } else {
          this.loading = false
        }
      },
      // 获取联系地址-区
      changeDistrict(cityCode, districtCode) {
        this.districtList = []
        this.baseForm.contactDistrictCode = ''
        if (cityCode) {
          listDistrict(cityCode).then(response => {
            this.districtList = response.data
            this.loading = false
          })
          this.baseForm.contactDistrictCode = districtCode
        } else {
          this.loading = false
        }
      },
      // 结算类型改变事件
      settlementTypeChange(value) {
        this.baseForm.settlementRate = 0
        this.$refs['manageFrom'].clearValidate()
      },
      // 保存事件
      handleSave() {
        if (this.baseForm.password !== this.baseForm.passwordAgain) {
          this.msgError('两次输入密码不一致')
          return
        }
        this.$refs['baseForm'].validate((valid) => {
          if (valid) {
            this.$refs['manageFrom'].validate((valid_1) => {
              if (valid_1) {
                this.loading = true
                this.baseForm.goodsAutoApprove = this.baseForm.goodsAutoApproveFlag ? 1 : 0
                this.baseForm.platformGenerationInvoiceFlag = this.baseForm.platformGenerationInvoiceFlag ? 1 : 0
                saveSupplier(this.baseForm).then(response => {
                  if (response.isError) {
                    this.loading = false
                    return
                  }
                  this.msgSuccess('保存成功')
                  if (this.newFlag) this.$router.go(-1)
                  else this.init()
                })
              }
            })
          }
        })
      },
      // 审核事件
      updateStatus(statusCode) {
        this.loading = true
        const form = {
          qualificationId: this.baseForm.qualificationId,
          approveStatus: statusCode
        }
        updateApproveStatus(form).then(response => {
          if (response.isError) return
          this.msgSuccess('保存成功')
          this.init()
        })
      },
      showPrePicDialog(file) {
        this.prePicImageUrl = file.url
        this.prePicDialogVisable = true
      },
      downloadIamge(imgsrc, name) { // 下载图片地址和图片名
        var image = new Image()
        // 解决跨域 Canvas 污染问题
        image.setAttribute('crossOrigin', 'anonymous')
        image.onload = function() {
          var canvas = document.createElement('canvas')
          canvas.width = image.width
          canvas.height = image.height
          var context = canvas.getContext('2d')
          context.drawImage(image, 0, 0, image.width, image.height)
          var url = canvas.toDataURL('image/png') // 得到图片的base64编码数据

          var a = document.createElement('a') // 生成一个a元素
          var event = new MouseEvent('click') // 创建一个单击事件
          a.download = name || 'photo' // 设置图片名称
          a.href = url // 将生成的URL设置为a.href属性
          a.dispatchEvent(event) // 触发a的单击事件
        }
        image.src = imgsrc
      },
      handleUploadBusinessLicensePicSuccess(res, file, fileList) {
        this.picOtherLoading = false
        if (res.code === 101) {
          this.baseForm.businessLicenseUrl = res.data[0]
        } else {
          this.msgError(res.msg)
          return false
        }
      },
      beforeUploadBusinessLicensePic(file) {
        if (this.validatePic(file)) {
          this.picOtherLoading = true
          return true
        }
        return false
      },
      validatePic(file) {
        const isJPG = file.type === 'image/jpeg'
        const isGIF = file.type === 'image/gif'
        const isPNG = file.type === 'image/png'
        const isBMP = file.type === 'image/bmp'
        if (!isJPG && !isGIF && !isPNG && !isBMP) {
          this.msgError('上传图片必须是JPG/GIF/PNG/BMP 格式!')
          return false
        }
        return (isJPG || isBMP || isGIF || isPNG)
      },
      handleRemoveBusinessLicensePic(file) {
        this.baseForm.businessLicenseUrl = undefined
      },
      beforeUploadOtherPic(file) {
        return this.validatePic(file)
      },
      handleUploadOtherPicSuccess(res, file, fileList) {
        if (res.code === 101) {
          // 新建对象push会闪一下 直接push file file里面有url信息
          // 也可以使用此方法 https://www.jianshu.com/p/33f42c41c34e
          this.baseForm.otherImageList.push(res.data[0])
        } else {
          this.msgError(res.msg)
          return false
        }
      },
      handleRemovePic(file, type) {
        const arrPic = this.$refs.uploadOtherPic.uploadFiles
        const index = arrPic.indexOf(file)
        this.baseForm.otherImageList.splice(index, 1)
        let num = 0
        arrPic.map((item) => {
          if (item.uid === file.uid) {
            arrPic.splice(num, 1)
          }
          num++
        })
      },
      beforeUploadAgreementPic(file) {
        return this.validatePic(file)
      },
      handleUploadAgreementPicSuccess(res, file, fileList) {
        if (res.code === 101) {
          // 新建对象push会闪一下 可以直接push file file里面有url信息
          // 也可以使用此方法 https://www.jianshu.com/p/33f42c41c34e
          this.baseForm.agreementImageList.push(res.data[0])
        } else {
          this.msgError(res.msg)
          return false
        }
      },
      handleRemoveAgreementPic(file, type) {
        const arrPic = this.$refs.uploadAgreementPic.uploadFiles
        const index = arrPic.indexOf(file)
        this.baseForm.agreementImageList.splice(index, 1)
        let num = 0
        arrPic.map((item) => {
          if (item.uid === file.uid) {
            arrPic.splice(num, 1)
          }
          num++
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .container {
    background: rgb(248, 249, 251);
    min-height: calc(100vh - 50px);
    padding: 0 30px;
  }

  .box {
    .title {
      font-size: 20px;
      padding: 15px 0;
    }

    .content {
      background: white;
      padding: 20px;

      form {
        width: 520px;
      }

      .content-area {
        display: contents;

        .el-checkbox {
          margin-right: 0px;
        }
      }
    }
  }

  .sub-title {
    margin-left: 20px;
    font-size: 24px;
    margin-bottom: 30px;
  }

  /deep/ .disabled .el-upload--picture-card {
    display: none;
  }
</style>
